<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import {onBeforeUnmount, onMounted} from "vue";
import * as Cesium from 'cesium'
import {Ion, Terrain, Viewer} from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";

// 服务器上托管 CesiumJS 静态文件的 URL。
window.CESIUM_BASE_URL = '/Cesium';
// 您的访问令牌可在以下位置找到：https://ion.cesium.com/tokens。
// 将“your_access_token”替换为您的铯离子访问令牌。
Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjJhZWE3NC1iYjY2LTQwZjAtODc0YS0zZTdlMjRmNTE5ZDEiLCJpZCI6MjA1NjY1LCJpYXQiOjE3MTE5MzExMzB9.efKdT634nrROZLOR-GmU5gvPmnlCDsiHDTkCYlU4SXA';
// 设置默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    114.0,
    22.0,
    117.0,
    25.0
);

/* 创建视图（查看器） */
async function createViewer() {
  const viewer = new Viewer('cesiumContainer', {
    animation: false, // 隐藏左下角动画部件
    timeline: false, // 隐藏底部时间轴部件
    fullscreenButton: false, // 隐藏右下角全屏按钮部件
    // creditDisplay: false, // 隐藏屏幕和灯箱中显示的制作人员名单。
    geocoder: false, // 隐藏右上角搜索按钮部件
    homeButton: false, // 隐藏右上角 Home 按钮部件
    sceneModePicker: false, // 隐藏右上角场景模式按钮部件
    baseLayerPicker: false, // 隐藏右上角图层选择按钮部件
    navigationHelpButton: false, // 隐藏右上角帮助按钮部件
    // vrButton: true, // 显示右下角 VRButton 按钮部件
    // selectionIndicator: false, // 隐藏点击要素之后显示的选择指示器
    // infoBox: false, // 隐藏点击要素之后显示的信息框
    // skyBox: false, // 天空盒，取消默认天空盒、太阳、月亮
    // skyAtmosphere: false, // 天空大气层，取消大气层效果 蔚蓝的天空，以及地球边缘的光芒
    // globe: false, // 要在场景中使用的地球仪。如果设置为 false ，则不会添加任何地球仪，并且默认情况下将隐藏天空大气层。
    // projectionPicker: true, // 显示右上角投影选择按钮部件
    // 所有地形提供商 - https://cesium.com/learn/cesiumjs/ref-doc/?classFilter=TerrainProvider
    terrain: Terrain.fromWorldTerrain({
      requestVertexNormals: true, // 请求其他照明信息
      requestWaterMask: true, // 请求每个磁贴的水掩码
    })
  });
  console.log('视图查看器：', viewer);
  // 启用光照
  // viewer.scene.globe.enableLighting = true;
  // 隐藏底部 Cesium logo 与 attribution 标注信息部件
  viewer.bottomContainer.style.display = 'none'
  // 去除控制台 infoBox 沙箱警告报错 （allow-scripts 不安全，容易导致 XSS 攻击）
  // Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
  let oInfoBoxSandBoxed = document.querySelector('.cesium-infoBox-iframe');
  if (oInfoBoxSandBoxed) {
    oInfoBoxSandBoxed.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-forms')
    oInfoBoxSandBoxed.setAttribute('src', '')
  }
  return viewer;
}

onMounted(async () => {
  // 创建查看器
  let viewer = await createViewer();
  // 设置视角为广州塔
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(113.32015, 23.09002, 2000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-45),
      roll: 0.0
    }
  });
  // 添加 OSM Buildings
  const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync();
  viewer.scene.primitives.add(osmBuildingsTileset)

  // 设置 3D 切片样式
  osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
    /* 显示 */
    // show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
    // 省略 feature
    // show: '${building} === "residential" || ${building} === "apartments"',
    // 带#属性值不能省略 feature，会报语法错误
    // show: '${feature["cesium#estimatedHeight"]} > 100',
    // show: '${feature["cesium#estimatedHeight"]} > 100 && ${feature["cesium#estimatedHeight"]} < 300',

    /* 颜色 */
    /*color: {
      // 条件，二维数组
      conditions: [
          // ['判断条件', '设置颜色'] - 支持 CSS 样式 - https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling#color
          // ${feature.xxx} 要素.属性 插值  ->  color('颜色值', 透明度)
          // ['${feature.name} === "广州塔"', 'color("red", 0.5)'],
          // ['${feature["name"]} === "广州塔"', 'color("red", 0.5)'],

          // 省略 feature
          // ['${name} === "广州塔"', 'color("red", 0.5)'],

          // 处理未定义的属性
          ['${building} === undefined', 'color("yellow")'],

          // true -> 默认颜色
          // ['true', 'color("#00FF00", 0.6)'],
          // ['true', 'color("rgb(0,0,255)", 0.7)'],
          ['true', 'color("rgba(0,255,255,0.8)")']
      ]
    },*/
    /* 定义范围颜色 */
    // 定义
    defines: {
      // 创建变量，以广州塔为中心，设置距离
      // distance 函数 - https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling#distance
      distanceFromComplex: "distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(113.31915, 23.10902))",
    },
    // 指定位置周边颜色
    color: {
      // 根据经纬度距离值，设置颜色
      conditions: [
        // 经纬度范围小于 0.005，设置为红色，以此类推
        ["${distanceFromComplex} < 0.005", "color('red', 0.8)"],
        ["${distanceFromComplex} < 0.01", "color('green', 0.8)"],
        ["${distanceFromComplex} < 0.015", "color('blue', 0.8)"],
        ["${distanceFromComplex} < 0.02", "color('yellow', 0.8)"],
        // 默认颜色
        ["true", "color('#ffffff')"],
      ],
    },

    /* 在 Cesium Stories 中使用样式编辑器 */
    // https://cesium.com/learn/cesiumjs-learn/cesiumjs-3d-tiles-styling/#use-the-styling-editor-in-cesium-stories
  })
})

onBeforeUnmount(() => {
})
</script>
